<template>
<div class="lottery-add views-container">
    <!-- 查看奖品弹窗 -->
  <el-dialog width="45%" :visible.sync="dialogListVisible"  custom-class="reset-pwd wlm-form-dialog dialog-table" style="margin-top: -10vh;">
      <div class="wlm-form" v-if="dialogListVisible" style="margin-bottom:0">
        <div class="wlm-form-header wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">中奖商品</span>
        </div>
          <div class="wlm-table-header" style="margin-bottom:-20px;margin-top:14px;">
                <el-table class="chooseTable" :data="periods" :row-style="{cursor:'pointer'}"  highlight-current-row style="width: 100%;padding:0 30px;border-bottom:none;margin-bottom:20px;">
                         <el-table-column prop="date" label="奖品名称">
                            <template slot-scope="scope">
                            <p>{{scope.row.title}}</p>
                            </template>
                        </el-table-column>
                         <el-table-column prop="date" label="商家名称">
                            <template slot-scope="scope">
                           <div style="display:flex; align-items:center;">
                                <div style="height:38px;width:38px;border-radius:38px;"><img style="height:100%;width:100%;border-radius:38px;" :src="scope.row.business.logo.file_path"></div>
                            <div>{{scope.row.business.name}}</div>
                           </div>
                            </template>
                        </el-table-column>
                         <el-table-column prop="date" label="门店名称">
                            <template slot-scope="scope">
                            <p>{{scope.row.store_name}}</p>
                            </template>
                        </el-table-column>
                           <el-table-column prop="date" label="领取状态">
                            <template slot-scope="scope">
                            <span v-if="scope.row.is_get==1">已领取</span>
                            <span v-if="scope.row.is_get==2">未领取</span>
                            </template>
                        </el-table-column>
                </el-table>
                
          </div>
      </div>
         <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" type="primary" @click="dialogListVisible = false">确定</el-button>
      </footer>
  </el-dialog>
  <!-- 添加虚拟用户弹窗 -->
    <el-dialog width="45%" :visible.sync="dialogListForm"  custom-class="reset-pwd wlm-form-dialog dialog-table" style="margin-top: -10vh;">
      <div class="wlm-form" v-if="dialogListForm" style="margin-bottom:0">
        <div class="wlm-form-header wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">添加虚拟用户</span>
        </div>
          <div class="wlm-table-header" style="margin-bottom:-20px;margin-top:14px;">
                <el-form ref="active" :model="formData" size="small" label-width="144px"  class="retail-form" label-position="right" style="height: 250px;margin:0 160px 0 160px;">
                    <el-form-item label="虚拟用户人数" prop="number">
                        <el-input style="width:150px;"  v-model.trim="formData.number">
                        </el-input>
                        <div class="form-help">系统根据输入人数默认创建相应的随机人数参与活动</div>
                    </el-form-item>
                      <el-form-item label="随机点赞数" prop="number">
                       <el-input style="width:150px;" v-model.trim="formData.rand_praise_min"></el-input>-
                       <el-input style="width:150px;"  v-model.trim="formData.rand_praise_max"></el-input>
                        <div class="form-help">系统创建虚拟用户时自动随机相应的点赞数到用户上</div>
                    </el-form-item>
                </el-form>
          </div>
      </div>
       <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" type="primary" @click="clsckbtn()">确定</el-button>
      </footer>
    </el-dialog>
  <div class="wlm-table">
      <div class="wlm-table-hearder-btn">
              <el-button size="small" type="primary" @click="adjunctionbtn" :disabled="this.$route.query.state==3">添加虚拟用户</el-button>
      </div>
      <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="用户昵称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.nickName" placeholder="请输入用户昵称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="中奖状态：" class="search">
                        <el-select v-model="tableFormatData.userTable.files.status" placeholder="请选择">
                            <el-option v-for="item in [{lable:'已获奖',value:'1'},{lable:'未获奖',value:'2'}]" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :data="tableFormatData.userTable.tableData" stripe @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column prop="title" label="活动标题" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="用户" min-width="100">
                    <template slot-scope="scope">
                        <div class="user" style="display:flex;align-items:center;">
                            <div style="height:38px;width:38px;border-radius:38px;"><img style="height:100%;width:100%;border-radius:38px;" :src="scope.row.avatarUrl?scope.row.avatarUrl:''"></div>
                            <div class="info" style="display:flex;flex-direction:column;margin-left:10px;">
                                <span>{{scope.row.nickName}}</span>
                                <span>{{scope.row.user_id==0?'虚拟用户':scope.row.user_id}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="抽奖时间" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.create_time}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="点赞数" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.praise_num}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="是否获奖" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">已获奖</span>
                        <span v-if="scope.row.status == 2">未获奖</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="操作" min-width="60">
                    <template slot-scope="scope">
                        <div class="opreation-group" style="display:flex;">
                             <el-popover
                                placement="top-start"
                                trigger="hover"
                                @show="popoverbtn"
                                >
                                 <div class="flex-row flex-align-c" style="margin-bottom:10px;width:200px;">
                                <span style="white-space: nowrap; margin-right:8px;">点赞: </span>
                                <el-input-number size="mini" v-model="number" style="margin-right:10px" :controls="false" :min="0"></el-input-number>
                                <!-- changeTableItem({id:scope.row.id,number:number},tableFormatData.userTable.change.praisenum) -->
                                 <el-button type="text" size="mini" @click="clickbtn(scope.row.id,number)">确定</el-button>
                                 </div>
                                   <div slot="reference" class="name-wrapper">
                                        <div class="pointer ellips_line2" style="max-width:100px;max-height: 51px;overflow: hidden;">
                                         <span>
                                             <el-button slot="reference" style="padding:0 10px"  type="text">增加点赞</el-button>
                                         </span>
                                        </div>
                                   </div>
                            </el-popover>
                            <!-- <el-button style="padding:0 10px"  type="text">增加点赞</el-button> -->
                           <div>
                                <div class="btn-line"  v-if="scope.row.status == 1"></div>
                            <el-button style="padding:0 10px" v-if="scope.row.status == 1" @click="seetbtn(scope.row.id)" type="text">查看奖品</el-button>
                           </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
             <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
  </div>  
</div>
</template>

<script>
import {
    praiseUserLists,
    praiseAddPraiseNum,
    praisePrizeLists,
    praiseAddUser 
} from '@/api/operation'
  import mixins from '@/mixins/mixins'
  export default {
      mixins: [mixins.getters('Table')],
      name:'userTable',
      data() {
          return {
              dialogListVisible:false,
              dialogListForm:false,
              periods:[],
              max:'',
              min:'',
              number:0,
              formData:{
                  number:'',
                  rand_praise_min:'',
                  rand_praise_max:''
              },
                tableFormatData: {
                    current: 'userTable',
                    userTable: {
                        key: 'userTable',
                        api: {
                            getList: praiseUserLists
                        },
                        tableData: [],
                        files: {
                            nickName: '',
                            status:'',
                            lotterType:'',
                        },
                        change: {
                            praisenum: {
                            key: 'praisenum',
                            api: praiseAddPraiseNum
                            },
                        },
                        pagination: {
                            page: 1,
                            list_rows: 10,
                            pagesizes: [10, 20, 50],
                            total: 0
                        }
                    },  
                }
          }
      },
      methods:{
          clickbtn(id,number){
                                   // <!-- changeTableItem({id:scope.row.id,number:number},tableFormatData.userTable.change.praisenum) -->
                if(this.$route.query.state==3){
                    this.$message.error('活动已结束，增加失败！')
                }else{
                    praiseAddPraiseNum({id:id,number:number}).then(res=>{
                            const { data: { code, msg } } = res
                            if (code === 1) {
                                this.$message.success(msg)
                                this.filesSerch()
                                // this.getGroupList()
                            } else {
                                this.$message.error(msg)
                            }
                    })
                }
          },
          clsckbtn(){
              this.dialogListForm = false
            //   this.formData.rand_praise_min

              this.max = this.formData.rand_praise_max
              this.min = this.formData.rand_praise_min

              praiseAddUser({number:this.formData.number,rand_praise_num:{max:this.max,min:this.min},praise_id:this.$route.query.praise_id}).then(res=>{
                //   console.log("ssssssssssssssssssssss",res)
                const { data: { code, msg } } = res
                if (code === 1) {
                    this.$message.success(msg)
                    this.filesSerch()
                    // this.getGroupList()
                } else {
                    this.$message.error(msg)
                }
              })
          },
          seetbtn(id){
              this.dialogListVisible = true
              praisePrizeLists({id:id}).then(res=>{
                  this.periods = res.data.data
              })
          },
          adjunctionbtn(){
              this.dialogListForm = true
          },
          popoverbtn(){
              this.number = ''
          }
      }
  }
</script>

<style scoped>

</style>